<template>
  <div class="home">
    <home_head></home_head>
    <div class="inner">
      <div class="step-box">
        <div v-for="(v,i) in steps" :key="i" class="item">
          <span :class="[{'active':activeIndex > i-1},'dot']"></span>
          <span class="line" v-if="i != steps.length -1"></span>
          <div class="name">{{v}}</div>
        </div>
      </div>
      <div v-if="power" :class="['page',{'full':activeIndex == 3}]">
        <person-info :resumeId="resumeId" @save="save" v-if="activeIndex == 0"></person-info>
        <edu-info :resumeId="resumeId" @save="save" @goBack="goBack" v-if="activeIndex == 1" :resumeOutVo="resumeOutVo"
          :education="education"></edu-info>
        <exp-info :noExp="notWorkExp" @save="save" @goBack="goBack" v-if="activeIndex == 2" :resumeId="resumeId">
        </exp-info>
        <success v-if="activeIndex == 3" :resume="resumeId"></success>
      </div>
    </div>
  </div>
</template>

<script>
import home_head from '../../../components/home/head.vue';
import PersonInfo from './personInfo.vue';
import EduInfo from './eduInfo.vue';
import ExpInfo from './expInfo.vue';
import Success from './success.vue';
import { getDetail } from '../../../api/registerInfo.js';
import { savePerson } from '../../../api/registerInfo.js';
import { getInfo } from '../../../api/registerInfo.js';
import { saveEdu } from '../../../api/registerInfo.js';
import { saveWork } from '../../../api/registerInfo.js';
export default {
  data () {
    return {
      notWorkExp: false,
      resumeId: null,
      power: true,
      resumeOutVo: [],
      currentStatus: [],
      tradeCategory: [],
      education: [],
      jobCategory: [],
      form: {},
      activeIndex: 0,
      steps: ['个人信息', '教育经历', '工作经验', '注册成功']
    };
  },
  components: {
    home_head,
    PersonInfo,
    EduInfo,
    ExpInfo,
    Success
  },
  created () {
    if (this.$route.query.mark) {
      this.activeIndex = Number(this.$route.query.mark) - 2;
    }
    if (this.$route.query.mark && this.$route.query.mark == 4) {
      getDetail(2).then(res => {
        if (res.success) {
          if (res.data) {
            this.notWorkExp = res.data.notWorkExp;
          }
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    }
    // if (this.$route.query.index) {
    //     this.activeIndex = Number(this.$route.query.index);
    // }
    //            this.getDetail();
  },
  methods: {
    save (data) {
      // 个人信息
      if (data.step == 2) {
        savePerson(data).then(res => {
          if (res.success) {
            this.notWorkExp = data.notWorkExp;
            this.activeIndex++;
            this.resumeId = res.data.id || '';
          } else {
            this.$message.error(`${res.msg}`);
          }
        });
      } else if (data.step == 3) {
        saveEdu(data).then(res => {
          if (res.success) {
            this.activeIndex++;
            this.resumeId = res.data.id || '';
          } else {
            this.$message.error(`${res.msg}`);
          }
        });
      } else if (data.step == 4) {
        saveWork(data).then(res => {
          if (res.success) {
            this.activeIndex++;
            // this.resumeId = res.data.id || '';
            // 这里取错值了 应该：res.data   xiaofei.qi
            this.resumeId = res.data || '';
          } else {
            this.$message.error(`${res.msg}`);
          }
        });
      }
    },
    getDetail () {
      getInfo().then(res => {
        if (res.success) {
          this.resumeOutVo = res.data.resumeOutVo || [];
          this.power = true;
          //                        this.currentStatus =  res.data.currentStatus || [];
          //                        this.education = res.data.education || [];
          //                        this.jobCategory = res.data.jobCategory || [];
          //                        this.tradeCategory = res.data.tradeCategory || [];
          //                        console.log(res.data)
        } else {
          this.$message.error(`${res.msg}`);
        }
      });
    },
    goBack () {
      this.activeIndex--;
    }
  }
};
</script>

<style lang="css" scoped>
.inner {
    width: 1200px;
    min-height: 581px;
    margin: 40px auto;
}
.page {
    width: 540px;
    min-height: 300px;
    background: #ffffff;
    margin: 40px auto;
}
.full {
    width: 100%;
    background: none;
}
.item {
    display: inline-block;
}
.name {
    margin-top: 8px;
    margin-left: -22px;
}
.step-box {
    display: flex;
    justify-content: center;
}
.step-box .dot {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 2px solid #1893fc;
    border-radius: 50%;
    display: inline-block;
}
.line {
    vertical-align: middle;
    background: #e8e8e8;
    content: '';
    display: inline-block;
    width: 105px;
    height: 1px;
}
.active {
    background: #1893fc;
}
</style>